<template>
  <div>
    <div class="search-container">
      <div class="search-inp-container">
        <el-input @keyup.enter.native="handleSearch" placeholder="输入手机号码" v-model="listQuery.destMobiles" clearable>
        </el-input>
      </div>
      <el-button class="search-btn" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
      <el-button class="search-btn" :autofocus="true" icon="el-icon-refresh" @click="refreshHandle">刷新</el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading="listLoading" border fit highlight-current-row ref="multipleTable"
              tooltip-effect="dark" style="width: 100%">
      <el-table-column align="center" prop="smsDownId" label="短信编号" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" prop="destMobiles" label="手机号" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" prop="createDate" label="发送时间">
        <template slot-scope="scope">
          <span>{{scope.row.createDate | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="content" label="内容" width="250">
      </el-table-column>
      <el-table-column align="center" prop="smsStatus" label="提交状态">
      </el-table-column>
      <el-table-column align="center" prop="resRespCode" label="响应代码">
        <template slot-scope="scope">
          <span>{{scope.row.resRespCode | resRespCodeFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="resRespMsg" label="响应说明">
      </el-table-column>
      <el-table-column align="center" prop="writeBack" label="是否回写">
        <template slot-scope="scope">
          <span>{{scope.row.writeBack | writeBackFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="reportStatus" label="回写报告">
      </el-table-column>
      <el-table-column align="center" prop="reportRecvTime" label="网关接收时间">
        <template slot-scope="scope">
          <span>{{scope.row.reportRecvTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.current" :page-size="listQuery.size" :page-sizes="[10, 40, 80, 100]"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { fetchList } from '@/api/msg'

  export default {
    data() {
      return {
        tableKey: 0,
        listLoading: false,
        list: [],
        listQuery: {
          current: 1,
          size: 10,
          destMobiles: ''
        },
        total: 0,
      }
    },
    filters: {
      writeBackFilter(writeBack) {
        const statusMap = {
          '0': '未回写',
          '1': '已回写',
          '-1': '短信提交失败不回写',
          '-2': '短信未提交不回写'
        }
        return statusMap[writeBack]
      },
      resRespCodeFilter(resRespCode) {
        const statusMap = {
          '0': '成功'
        }
        return statusMap[resRespCode]
      }
    },

    mounted() {
      this.getList()
    },

    methods: {
      getList() {
        fetchList(this.listQuery).then(response => {
          this.list = response.data.records
          this.total = response.data.total
          for (let i = 0; i < this.list.length; i++){
            if (this.list[i].smsStatus == 'success') {
              this.list[i].smsStatus = '成功'
            }
          }
          this.listLoading = false
        })
      },
      change(e) {
        this.$forceUpdate()
      },
      refreshHandle() {
        this.listQuery.current = 1
        this.listQuery.size = 10
        this.listQuery.destMobiles = ''
        this.getList()
      },
      handleSearch() {
        this.listQuery.current = 1
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.size = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.current = val
        this.getList()
      },
    }
  }
</script>


<style lang='scss' scoped>
  .w347 {
    width: 100%;
  }
</style>
